<template>
  <div style="display: flex;flex-direction: column;align-items: center;padding: 20px 30px;">
    <div style="width: 100%;">
      <div style="padding-right: 30px;">
        <el-form :model="formData" ref="formData" name="basic" label-width="120px" autocomplete="off">
          <el-row :gutter="15">
            <el-col :span="9">
              <el-form-item label="检查类型:" name="checkType">
                <el-select v-model="formData.checkType" show-search placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in checkTypeList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>



            <el-col :span="9">
              <el-form-item label="检查日期:" name="checkDate">
                <el-date-picker v-model="formData.checkDate" type="date" style="width: 100%;" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="9">
              <CompanySelect :title="'隐患所属企业'" :compName.sync="formData.companyName" />

            </el-col> -->


            <el-col :span="9">
              <el-form-item label="隐患位置:" name="riskLoc">
                <el-input v-model="formData.riskLoc" />
              </el-form-item>
            </el-col>
         


            <el-col :span="9">
              <el-form-item label="危险和有害因素:" name="dangerType">
                <el-select v-model="formData.dangerType" show-search placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in dangerTypeList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="隐患类型:" name="riskType">
                <!-- <el-select v-model="formData.riskType" show-search placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in riskTypeList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select> -->
                <el-cascader :options="riskTypeList"  v-model="formData.riskType" style="width: 100%"></el-cascader>

              </el-form-item>
            </el-col>

            <el-col :span="9">
              <el-form-item label="隐患等级:" name="dangerLevel">
                <el-select v-model="formData.dangerLevel" show-search placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in dangerLevelList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

           

            

            <el-col :span="9">
              <el-form-item label="整改期限:" name="expiryDateValue">
                <el-select v-model="formData.expiryDateValue" show-search placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in expiryDateList" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="18">
              <el-form-item label="隐患描述:" name="riskDesc">
                <el-input v-model="formData.riskDesc" type="textarea" :rows="3" />
              </el-form-item>
            </el-col>

            <el-col :span="18">
              <el-form-item label="整改建议:" name="improveAdv">
                <el-input v-model="formData.improveAdv" type="textarea" :rows="3" />
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="备注:" name="remark">
                <el-input v-model="formData.remark" type="textarea" :rows="3" />
              </el-form-item>
            </el-col>
          </el-row>


          <el-row>
            <el-col :span="9">
              <el-form-item label="上传图片:" name="credCode">
                <el-upload list-type="picture-card" :on-change="handleUploadChange" :auto-upload="false" action="https://jsonplaceholder.typicode.com/posts/"
                  :show-file-list="true"   :on-remove="handleUploadRemove"
                  >
                  <i class="el-icon-plus"></i>
                </el-upload>

              </el-form-item>
            </el-col>

          </el-row>



        </el-form>

      </div>
      <div style="margin-top: 20px;">
        <el-button @click="handleCancel">返回</el-button>
        <el-button type="primary" @click="handleOk">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    queryCompanyInfo,
    updateCompany,
    resetPassword,
  } from '@/service/company';
  import { updateUserNameAndPassword } from '@/service/user';
  import CompanySelect from '@/components/CompanySelect';
  import {uploadFile} from '@/service/safeRisk';

  
  import {riskTypeList,expiryDateList,dangerLevelList} from './data'
  import { getCurrUser } from '@/common/constants';
  import { downloadFile } from '@/common/download';

  export default {
    components: { CompanySelect },
    props: {},
    data() {
      return {
        user: {},
        activeName: 'first',
        formRef: null,
        formData: {},
        visible: false,
        companyName: '',
        isCurrent: false,
        isSaving: false,
        checkTypeList: [
          {
            label: "领导检查",
            value: "领导检查",
          },
          {
            label: "日常检查",
            value: "日常检查",
          },
          {
            label: "季节性检查",
            value: "季节性检查",
          },
          {
            label: "节前检查",
            value: "节前检查",
          },
          {
            label: "安全联盟检查",
            value: "安全联盟检查",
          },
          {
            label: "专业性检查",
            value: "专业性检查",
          },
          {
            label: "其他",
            value: "其他",
          },
        ],
        dangerTypeList: [
          {
            label: "人的因素",
            value: "人的因素",
          },
          {
            label: "物的因素",
            value: "物的因素",
          },
          {
            label: "环境因素",
            value: "环境因素",
          }, {
            label: "管理因素",
            value: "管理因素",
          },

        ],
        riskTypeList,
        expiryDateList,
        dangerLevelList,
        fileList:[],
        files:[]
        
      };
    },
    mounted() {
      this.companyName = this.$route.params.companyName;
      this.user = getCurrUser();
      this.isCurrent = this.user.userId == this.companyName;
      console.log('riskTypeList',this.riskTypeList);
      this.loadCompanyInfo();
    },
    methods: {
      handleUploadChange(file, fileList) {
        // this.fileList = fileList.slice(-3);
        this.fileList = fileList;
        this.files.push(file)

        console.log('this.files',this.files);
      },
      async loadCompanyInfo() {
        const res = await queryCompanyInfo({ companyName: this.companyName });
        if (res.data) {
          this.formData = res.data;
          // Object.assign(, );
        }
      },

      handleCancel() {
        this.$router.back();
      },

   
      handleUploadRemove(file, fileList){
        this.files = this.files.filter(item=>item != file)
      },

      handleOk() {
    
        this.isSaving = true;
        this.saveData();
        this.isSaving = false;
      },
   
      async saveData() {
        
        const fd = new FormData();
        // formData.append('file', fileObj.file);
        fd.append('body', JSON.stringify({...this.formData,compName:this.user.userId,riskType:this.formData.riskType[0]+'/'+ this.formData.riskType[1] }));
        for (var i = 0; i < this.files.length; i++) {
          fd.append('file', this.files[i].raw);
        }
        let res = null;
        // const startDate = dayjs(formData.startDate_new).format('YYYY-MM-DD')
        res = await uploadFile(fd);
        if (res.success) {
          this.formData = {}
          this.$message.success('保存成功！');
        } else {
          this.$message.error(res.rtn_message);
        }
      },
    },
  };
</script>
<style scoped>
  >>>.el-form-item__content {
    text-align: start;
  }
</style>